用户提供了某个厂区的底图（就一张静态图片），在底图中，划分了10个不规则区域，给了10个区域的高亮、开灯效果图片（切好了图），鼠标滑过每个区域的时候，要高亮显示，开灯的时候，显示开灯效果；看到这个需求的时候，挺懵的，有点不知从何下手，但是分析后，有2种可以实现的方案，具体方案如下：

方案1：传统的div去定位，绝对定位，用css实现hover效果，click的时候设置active效果。

这种方案会存在问题。首先，划分的区域是不规则的，如果强行用div去定位，可能会导致区域重叠的问题；其次鼠标划过，鼠标高亮效果要完全和底图贴合，这一点其实不容易实现。而且浏览器全屏后，可能会导致位置出现偏差的问题，基于以上的考虑，我放弃了此方案。

方案2：用Canvas和SVG的方式实现。不规则的区域，手动取点，绘制路径，鼠标划过或鼠标点击的时候，判断鼠标坐标点是否在Path路径内，如果在某个区域内，就显示对应效果。但是要考虑一个问题，因为Path的点，我们是在某个分辨率基准下取点的，这就导致在不同屏幕分辨率下，会导致，无法取到点的问题，所以要重新计算鼠标坐标点。这种方案，全屏后，也不会说出现位置偏差，后面采用了此种方案，具体实现过程如下：

1、找一个容器，放背景图

2、 绘制canvas区域，并且在每个区域写上文字标识，绘制10个区域

3、接下来就是处理鼠标滑过、鼠标点击的问题了

判断坐标点位置的核心代码

4、重新计算坐标点位：

说明1920,937为绘制路径时，屏幕可视区域的基准值，这个根据自己的情况来定

然后再鼠标划过，鼠标点击的时候，要注意用当前坐标点乘以一个系数ratioX，ratioY

基本上就这样子了

反正就是要注意导入图片时，不要用路径，否则会出现闪烁的问题，因为一直从服务器请求资源，建议用base64。

完整代码就不粘了，有疑问或者有更好的方案，欢迎留言！